<template>
  <div>
    <el-button type="warning" @click="add">添加</el-button>
    <el-button type="danger">批量删除</el-button>
    <!-- 表格 -->
    <role-form
      :rolelist="rolelist"
      @getlist="getlist"
      @editrole="editrole"
    ></role-form>
    <!-- 弹出框 -->
    <role-add
      :popup="popup"
      ref="child"
      :menulist="menulist"
      @getlist="getlist"
    ></role-add>
  </div>
</template>

<script>
import roleForm from "./components/rolelist.vue";
import roleAdd from "./components/addrole.vue";
export default {
  props: {},
  data() {
    return {
      rolelist: [], // 角色列表
      popup: {
        flag: false, // 弹出框状态
      },
      menulist: [],
    };
  },
  computed: {},
  created() {
    this.getlist();
  },
  mounted() {},
  watch: {},
  methods: {
    getlist() {
      // 获取角色列表

      this.$api
        .getrolelist()
        .then((res) => {
          this.rolelist = res.data.list;
        })
        .catch((err) => console.log(err));
    },
    add() {
      // 弹出框状态
      this.popup.flag = true;
    },
    editrole(obj) {
      // 编辑
      // console.log(obj);
      this.$refs.child.backfillArr = JSON.parse(
        JSON.stringify(obj.menus.split(","))
      );
      this.$refs.child.form = JSON.parse(JSON.stringify(obj));
      this.popup.flag = true;
      console.log(this.$refs.child.form);
    },
  },
  components: {
    roleForm,
    roleAdd,
  },
};
</script>

<style scoped lang="scss">
</style>
